<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"></script>
    <style>
        li {
            line-height: 40px;
            text-indent: 16px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div id="app">

        <p>count:{{count}}</p>
        <p>doubleCount:{{doubleCount}}</p>
        <p>tripleCount:{{tripleCount}}</p>
        <p>
            <button @click="count++">count++</button>
            <button @click="doubleCount+=2">doubleCount+2</button>
            <button @click="tripleCount+=3">tripleCount+3</button>
        </p>
    </div>
</body>
<script>
    // 一般情况下,不建议v-for和v-if同时使用, 如果v-for和v-if同时使用 v-for的优先级高于v-if,先将元素重复n次,在逐个判断每个元素是否渲染

    // methods => 每次Vue在解析模版为虚拟DOM时,函数都会执行一次 => 得到函数的执行结果 => 放到模版中


    // 计算属性 (派生值/衍生值)   -> 也会挂载到Vue实例中
    // 可以依赖data中的一个或多个属性得到一个新值(派生值/衍生值), 如果依赖的数据没有发生改变,会一直使用缓存的结果,如果依赖的数据发生改变,会重新调用函数得到新的结果,并缓存

    // 计算属性是基于它的响应式依赖来进行缓存的

    // 计算属性  => 计算属性是基于它的响应式依赖来进行缓存的
    // 1. 根据data中原有的属性得到的一个新属性(派生值/衍生值) 注意:计算属性也可以依赖于其他的计算属性
    // 2. 计算属性初始化阶段会默认执行一次,并缓存执行的结果(初始值)
    // 3. 计算属性依赖的数据发生改变, 会重新执行函数并缓存新的结果
    // 4. 如果计算属性中没有依赖的数据, 那么只会在初始化阶段执行一次,后续结果不在更改

    // 计算属性的变化是被动的 => 只有依赖的数据发生改变,计算属性才会改变 => 更注重其他数据改变,对自身造成的影响

    // 案例1:
    // 小计(新值) = 商品价格(依赖1) * 商品数量(依赖2)
    //                 250              2

    // 案例2:
    // 老板(收益) = 员工A + 员工B + 员工C


    var app = new Vue({
        el: "#app",
        data: {
            count: 1,
        },
        methods: {

        },
        // 计算属性
        computed: {
            // 键名  -> 计算属性名(getOu) -> 也会挂载到Vue实例中
            // 健值  -> 函数 => 此函数会在初始化阶段默认执行一次(getter), 此时函数的返回值会作为计算属性的初始值,缓存结算的结果

            // 此写法:计算属性默认只有取值,没有赋值
            // doubleCount: function () {
            //     return this.count * 2;
            // },
            // tripleCount: function () {
            //     return this.count * 3;
            // }

            // 如何能给计算属性赋值?  

            doubleCount: {
                get: function () {  // getter => 对计算属性取值时触发此函数/ 在初始化阶段默认执行一次
                    return this.count * 2;
                },
                set: function (val) { // setter => 对计算属性添加赋值拦截   val 赋值给计算属性doubleCount的值
                    this.count = val / 2;
                }
            },
            tripleCount: {
                get: function () {  // getter => 对计算属性取值时触发此函数/ 在初始化阶段默认执行一次
                    return this.count * 3;
                },
                set: function (val) { // val 赋值给计算属性doubleCount的值
                    this.count = val / 3;
                }
            }


        }
    })


</script>

</html>